<template>
	<div>
		<header>
			<span @click="backClick"><返回</span>
			<span>当前位置：收支总览</span>
			<div class="div">
				当前选择：
		  		<el-select v-model="value" placeholder="请选择" @change="change">
				    <el-option
				      v-for="item in departmentArr"
				      :key="item.id"
				      :label="item.name"
				      :value="item.name"
				      :disabled='item.dtDisabled'>
				    </el-option>
			  	</el-select>
			</div>
		</header>
		<div class="container" :style="{height: heightClient}">
			<div class="container_top">
				<ul>
					<li :class="{topActive: tabShow}" @click="tab('all')">
						<span></span>
						<span>执行口径</span>
					</li>
					<li :class="{topActive: !tabShow}" @click="tab('hospital')">
						<span></span>
						<span>申请口径</span>
					</li>
				</ul>
			</div>
			<div class="container_first">
				<div class="all_rest " v-show="!tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗收入(万元)</span><br>
							<span>累积：</span>
							<span>{{thisMonth_treaInc}}</span><br>
						</div>
						<div ref="applyHosInc" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
					</div>
				</div>
				<div class="all_income"	v-show="!tabShow">
					<div style="width: calc(50% - 10px);height: calc(100% - 10px); padding:5px;">
						<span style="display: inline-block; width: 200px;height: 40px; line-height: 40px;padding-left: 5px;">住院收入构成</span>
						<div ref="allincome"  v-show="!zhuyuanImg" style="width: calc(100% - 10px);height: calc(100% - 50px); padding:5px;"></div>
						<div v-show="zhuyuanImg" class="data-lack">
							
							<img src="./../../assets/lacklength.svg">
						</div>
					</div>
					
					<div style="width: calc(50% - 10px);height: calc(100% - 10px); padding:5px;">
						<span style="display: inline-block; width: 200px;height: 40px; line-height: 40px;padding-left: 5px;">门诊收入构成</span>
						<div ref="alloutput"  style="width: calc(100% - 10px);height: calc(100% - 50px); padding:5px;" v-show="!menzhenImg"></div>
						<div v-show="menzhenImg" class="data-lack">
							
							<img src="./../../assets/lacklength.svg">
						</div>
					</div>
					
				</div>
				<div class="hos_income" v-show="tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗收入(万元)</span><br>
							<span>累积：</span>
							<span>{{thisMonth_treaInc}}</span><br>
						</div>
						<div ref="hosInc" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
					</div>
					<div ref="hosincome" style="width: calc(100% - 215px); height: calc(100% - 10px); padding: 5px"></div>
				</div>
				<div class="hos_output" v-show="tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗支出(万元)</span><br>
							<span>累积：</span>
							<span>{{thisMonth_treaOut}}</span><br>
						</div>
						<div ref="hosOut" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
						
					</div>
					<div ref="hosoutput" style="width: calc(100% - 215px); height: calc(100% - 10px); padding: 5px"></div>
				</div>
				<div class="all_rest"  v-show="tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗结余(万元)</span><br>
							<span>累积：</span>
							<span>{{thisMonth_emeLeft}}</span><br>
						</div>
						<div ref="emeLeft" style="width: calc(100% - 10px);height: calc(100% - 70px);"></div>
					</div>
				</div>
			</div>
			<div class="container_second">
				<div class="second_left">
					<div class="second_title">
						经治组收入（万元）
					</div>
					<div style="height: calc(100% - 80px); overflow-y: auto; width: calc(100% - 20px);margin: 0 auto; " v-show="!imgShow">
						<div ref="incomeTrends" :style="{height:listHeight}"></div>
					</div>
					<div style="height: calc(100% - 80px); overflow-y: auto; width: calc(100% - 20px);margin: 30px auto 0;" v-show="imgShow" >
						<img src="./../../assets/lackshort.svg" style="display: block;margin: 0 auto "> 
					</div>
					
				</div>
				<div class="second_right">
					<div class="second_title" v-show="tabShow">
						收支趋势
					</div>
					<div class="second_title" v-show="!tabShow">
						医疗收入趋势
					</div>
					<div ref="incomeTrend" style="height: 90%;width: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	import echarts from 'echarts'
	export default {
		props: ['month'],
		data () {
			return {
				heightClient: '0px',
				tabShow: true,
				imgShow: false,
				value: '',
				listHeight: '100px',
				departmentArr: [],//部门数组
				incMonthDep: {},
				thisMonth_treaInc: '',//本月医疗收入
				thisMonth_treaOut: '',//本月医疗支出
				thisMonth_emeLeft: '',//本月医疗结余
				samePeriod_treaInc: {},//同期医疗收入
				samePeriod_treaOut: {},//同期医疗支出
				samePeriod_emeLeft: {},//同期医疗结余
				zhuyuanImg: false,//住院判断空值
				menzhenImg: false,//门诊判断空值
				departmentCode: [],//经治组部门code
				options: {
			    tooltip: {
			        trigger: 'axis',
			        enterable:true,
			        // axisPointer: {
			        //     type: 'shadow'
			        // }
			    },
			    grid: {
			        left: '3%',
			        right: '70px',
			        bottom: '3%',
			        top: '0',
			        containLabel: true
			    },
			    xAxis: [{
			        type: 'value',
			        // boundaryGap: [0, 0.01],
			        show: false
			    },{
			        type: 'value',
			        data: [],
			        show: false
			    }],
			    yAxis: [{
			        type: 'category',
			        data: ['1', '2'],
			        nameGap: '100',
			        boundaryGap: true,
			        axisLine: {
			        	show: false
			        },
			        // axisPointer: {
		         //        show: false
		         //    },
			        axisTick: {
			        	show: false,
			        	length: 100
			        },
			        axisLabel: {
			        	interval: 0
			        }

			    },{

    				type: "category",
			        data: [],
			        nameGap: '100',
			        boundaryGap: true,
			        show: false,
			    }],
			    series: [

			        {
			            name: '本月',
			            type: 'bar',
			            barWidth: 21,
			            data: [20, 30],
			            // legendHoverLink: false,
			            label: {
			            	show: true,
			            	position: 'right',
			            	color: '#333',
			            	formatter: function(params) {
			            		return (Number(params.value)/10000).toFixed(2).toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#5F9FE3'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: '#8FB1EA'
			            	}
			            }
			        },
			        {	
			        	xAxisIndex: 1,
						yAxisIndex: 1,
			            type: 'bar',
			            barWidth: 20,
			            data: [500,500,500],
			            itemStyle: {
							normal: {
							barBorderColor: 'transparent',
							color: 'transparent'
							}
            			}		
			            
			        }
			    ]
			  },
				optionsIncomeTrend: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			    		itemWidth: 25,
			    		itemHeight: 5,
			        data:[
				        {
				        	icon: 'rect',
				        	name: '医疗收入'
				        },
				        {
				        	icon: 'rect',
				        	name: '医疗支出'
				        },
				        {
				        	icon: 'rect',
				        	name: '医疗结余'
				        }
			        ],
			        bottom: 20
			    },
			    grid: {
			        left: '3%',
			        right: '3%',
			        top: '6%',
			        bottom: '23%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2017.05','2017.06','2017.07','2017.08','2017.09','2017.10','2017.11','2017.12','2018.01','2018.02','2018.03','2018.04','2018.05'],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        }
			    },
			    yAxis: {
			        type: 'value',
			        axisTick: {
			        	show: false
			        },
			        axisLabel: {
		                formatter: function(value) {
		                	if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else if(parseInt(value) < -1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else
		                	return value
		                }
		            },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			        {
			            name:'医疗收入',
			            type:'line',
			            // stack: '总量',
			            data:[234, 290, 330, 310, 120,120, 132, 101, 134, 90, 230, 210],
			            itemStyle: {
			            	normal: {
			            		color: '#72C2F1'
			            	}
			            }
			        },
			        {
			            name:'医疗支出',
			            type:'line',
			            // stack: '总量',
			            data:[220, 182, 154, 110, 232, 201, 154, 20, 232,154],
			            itemStyle: {
			            	normal: {
			            		color: '#F5A623'
			            	}
			            }
			        },
			        {
			            name:'医疗结余',
			            type:'line',
			            // stack: '总量',
			            data:[150, 232, 201, 154, 110, 232, 201, 1],
			            itemStyle: {
			            	normal: {
			            		color: '#ccc'
			            	}
			            }
			        }
			    ]
				},
				shenqingIncomeTrend: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			    		itemWidth: 25,
			    		itemHeight: 5,
			        data:[
				        {
				        	icon: 'rect',
				        	name: '医疗收入'
				        },
				        {
				        	icon: 'rect',
				        	name: '医疗收入-住院'
				        },
				        {
				        	icon: 'rect',
				        	name: '医疗收入-门诊'
				        }
			        ],
			        bottom: 20
			    },
			    grid: {
			        left: '3%',
			        right: '3%',
			        top: '6%',
			        bottom: '23%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2017.05','2017.06','2017.07','2017.08','2017.09','2017.10','2017.11','2017.12','2018.01','2018.02','2018.03','2018.04','2018.05'],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        }
			    },
			    yAxis: {
			        type: 'value',
			        axisTick: {
			        	show: false
			        },
			        axisLabel: {
		                formatter: function(value) {
		                	if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else if(parseInt(value) < -1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else
		                	return value
		                }
		            },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			        {
			            name:'医疗收入',
			            type:'line',
			            // stack: '总量',
			            data:[234, 290, 330, 310, 120,120, 132, 101, 134, 90, 230, 210],
			            itemStyle: {
			            	normal: {
			            		color: '#F5A623'
			            	}
			            }
			        },
			        {
			            name:'医疗收入-住院',
			            type:'line',
			            // stack: '总量',
			            data:[220, 182, 154, 110, 232, 201, 154, 20, 232,154],
			            itemStyle: {
			            	normal: {
			            		color: '#72C2F1'
			            	}
			            }
			        },
			        {
			            name:'医疗收入-门诊',
			            type:'line',
			            // stack: '总量',
			            data:[150, 232, 201, 154, 110, 232, 201, 1],
			            itemStyle: {
			            	normal: {
			            		color: '#B2A1EC'
			            	}
			            }
			        }
			    ]
				},
				optionsAlloutput: {
				backgroundColor: '#f6f6f6',
				// title: {
				// 	text: '门诊收入构成',
				// 	textStyle: {
				// 		// font-family: 'PingFangSC-Regular',
				// 		color: '#000',
				// 		fontWeight: 'normal',
				// 		// backgroundColor:'black',
				// 		fontSize: '15'
						
				// 	},
				// 	right: '2%',
				// 	top: '2%'
				// },
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '10%',
			    	right: '2%'
			    },
			    legend: {
			    	itemWidth: 12,
			    	top: '3%',
			    	right: '3%',
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            // axisPointer: {
			            //     show: false
			            // },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			            axisLabel: {
			            	interval: 0,
			            	rotate: 40,
			            	color: '#5D5D5D'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#B1C8EE',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#74A2F0'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#BCB9E5',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#928CDA'
			            	}
			            }
			        }
			    ] 
				},
				optionsAllincome: {
					backgroundColor: '#f6f6f6',
					// title: {
					// 	text: '住院收入构成',
					// 	textStyle: {
					// 		// font-family: 'PingFangSC-Regular',
					// 		color: '#000',
					// 		fontWeight: 'normal',
					// 		// backgroundColor:'black',
					// 		fontSize: '15'
							
					// 	},
					// 	right: '2%',
					// 	top: '2%'
					// },
					legend: {
				    	itemWidth: 12,
				    	top: '3%',
				    	right: '3%',
				        data:[
				        	{
				        		icon: 'circle',
				        		name: '本月'
				        	},
				        	{
				        		icon: 'circle',
				        		name: '同期'
				        	}
				        ]
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    grid: {
				    	top: '12%',
				    	left: '10%',
				    	right: '2%'
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['放射费','护理费','化验费','会诊费', '检查费','手术费','输血费','输养费','卫生材料费','西药费','诊察费','治疗费','中草药费','中成药费','其他费'],
				            // axisPointer: {
				            //     show: false
				            // },
				            axisTick: {
				            	show: false
				            },
				            axisLine: {
				            	show: false
				            },
				            axisLabel: {
				            	interval: 0,
				            	rotate: 40,
				            	color: '#5D5D5D'
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            show: false
				        },
				        {
				            type: 'value',
				            show: false
				        }
				    ],
				    series: [
				        {
				            name:'本月',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#B1C8EE',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#74A2F0'
				            	}
				            }
				        },
				        {
				            name:'同期',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#BCB9E5',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#928CDA'
				            	}
				            }
				        }
				    ] 
				},
				optionsHosInc: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院收入',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#5AAAE2'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#5AAAE2'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#8983D2'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#8983D2'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        }
				    ] 
				},
				optionsHosIncome: {
					backgroundColor: '#f6f6f6',
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%'
			    },
			    legend: {
			    	itemWidth: 12,
			    	top: '3%',
			    	right: '3%',
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['住院收入','门诊收入'],
			            // axisPointer: {
			            //     show: false
			            // },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			            axisLabel: {
			            	// rotate: 20,
			            	interval: 0,
			            	color: '#5D5D5D'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#B1C8EE',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#74A2F0'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#BCB9E5',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#928CDA'
			            	}
			            }
			        }
			    ] 
				},
				optionsHosOut: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院收入',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#74C9DD'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#74C9DD'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#B4AFF0'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#B4AFF0'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        }
				    ] 
				},
				optionsHosOutput: {
				backgroundColor: '#f6f6f6',
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '5%',
			    	right: '0'
			    },
			    legend: {
			    	itemWidth: 12,
			    	top: '3%',
			    	right: '3%',
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            // axisPointer: {
			            //     show: false
			            // },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			           axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#B1C8EE',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#74A2F0'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#BCB9E5',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#928CDA'
			            	}
			            }
			        }
			    ] 
				},
				optionsEmeLeft: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '15%',
						left: '5%',
						right: '5%',
						bottom: '20%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院结余',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#FECA72'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#FECA72'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#BFE694'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#BFE694'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				    ] 
				},
			}
		},
		created () {
			this.heightClient = document.body.clientHeight - 170 + 'px'
			this.getDepartment()
			// this.depId = this.$store.state.department
			// this.value = this.depId
			
		},
		watch: {
			month (newV, oldV) {
				this.month = newV
				// this.getincDepAnalyse()
				this.getDepartment()
			}
		},
		mounted () {

			var myChart = echarts.init(this.$refs.incomeTrends)
			var self = this
			let incomeTrend = {
				tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			    		itemWidth: 25,
			    		itemHeight: 5,
			        data:[
				        {
				        	icon: 'rect',
				        	name: '医疗收入'
				        }
			        ],
			        bottom: 20
			    },
			    grid: {
			        left: '3%',
			        right: '3%',
			        top: '6%',
			        bottom: '23%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: [],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        }
			    },
			    yAxis: {
			        type: 'value',
			        axisTick: {
			        	show: false
			        },
			        axisLabel: {
		                formatter: function(value) {
		                	if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else if(parseInt(value) < -1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else
		                	return value
		                }
		            },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			        {
			            name:'医疗收入',
			            type:'line',
			            // stack: '总量',
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#72C2F1'
			            	}
			            }
			        }
			    ]
			}
			myChart.on("click", function(params) {
				var index = params.dataIndex;
		      	for(var i = 0 ; i < self.options.yAxis[0].data.length ; i++){
		           	if(self.options.series[0].data[i].value){
		                self.options.series[0].data[i] = self.options.series[0].data[i].value;
		            }
			        if(index == i){
			            self.options.series[0].data[i] = {
			                value : self.options.series[0].data[i],
			                itemStyle:{
			                    normal:{
			                        color : '#5F9FE3'
			                    }
			                }
			            }
			        }
			    }
			    myChart.setOption(self.options)
				if (self.tabShow == true) {
					var qs = require('qs')
					var depCode = self.departmentCode[params.dataIndex]
					axios.post('/service', 
		          		qs.stringify({"data": JSON.stringify({
		              		command: 'busMonthGroupSurNum',
		              		platform: 'web',
		              		monthTime: self.month,
		              		type: 'treatment',
		              		code: depCode
		             		})
		          		}), {
		              		headers: {
		               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
		              		}
		            }).then(function (rep) {
		              	if(rep.data.statusCode === '10001') {
		              		var incMonthDep = rep.data.data.busMonthGroup
		              		incomeTrend.xAxis.data = incMonthDep.thisMonth.monthTrend.xData
							incomeTrend.series[0].data = incMonthDep.thisMonth.monthTrend.yTreaInc
							self.myChart = echarts.init(self.$refs.incomeTrend)
							self.myChart.clear()
							self.myChart.setOption(incomeTrend)
		              	}
		          		
		         	}).catch(function (error) {
		          		// console.log(error);
		         	});
				} else {
					var qs = require('qs')
					var depCode = self.departmentCode[params.dataIndex]
					axios.post('/service', 
		          		qs.stringify({"data": JSON.stringify({
		              		command: 'busMonthGroupSurNum',
		              		platform: 'web',
		              		monthTime: self.month,
		              		type: 'treatmentApply',
		              		code: depCode
		             		})
		          		}), {
		              		headers: {
		               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
		              		}
		            }).then(function (rep) {
		              	if(rep.data.statusCode === '10001') {
		              		var incMonthDep = rep.data.data.busMonthGroup
		              		incomeTrend.xAxis.data = incMonthDep.thisMonth.monthTrend.xData
							incomeTrend.series[0].data = incMonthDep.thisMonth.monthTrend.yTreaInc
							self.myChart = echarts.init(self.$refs.incomeTrend)
							self.myChart.clear()
							self.myChart.setOption(incomeTrend)
		              	}
		          		
		         	}).catch(function (error) {
		          		// console.log(error);
		         	});
				}
			})

		},
		methods: {
			number(data) {
	  			if(data != null) {
	  				return data.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
	  			} else {
	  				return
	  			}
	  		},
			//执行口径
			getincDepAnalyse () {
				var qs = require('qs');
	          	var self = this
	          	axios.post('/service', 
	          		qs.stringify({"data": JSON.stringify({
	              		command: 'incDepAnalyse',
	              		platform: 'web',
	              		monthTime: self.month,
	              		depId: self.depId
	             		})
	          		}), {
	              		headers: {
	               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
	              		}
	            }).then(function (rep) {
	              	if (rep.data.statusCode === '10001') {
	              		let incMonthDep = rep.data.data.incMonthDep
	              		//医疗收入
	              		self.thisMonth_treaInc = self.number((Number(incMonthDep.thisMonth.treaInc)/10000).toFixed(2))
	              		self.optionsHosIncome.xAxis[0].data = incMonthDep.thisMonth.incomeTrend.xData
	              		self.optionsHosIncome.series[0].data = incMonthDep.thisMonth.incomeTrend.yData
	              		self.optionsHosIncome.series[1].data = incMonthDep.samePeriod.incomeTrend.yData
	              		self.myChart3 = echarts.init(self.$refs.hosincome)
						self.myChart3.setOption(self.optionsHosIncome)
						self.optionsHosInc.series[0].data[0].value = incMonthDep.thisMonth.treaInc
						self.optionsHosInc.series[0].data[1].value = incMonthDep.samePeriod.treaInc
						self.myChart13 = echarts.init(self.$refs.hosInc)
						self.myChart13.setOption(self.optionsHosInc)
	              		//医疗支出
	              		self.thisMonth_treaOut = self.number((Number(incMonthDep.thisMonth.treaOut)/10000).toFixed(2))
	              		self.optionsHosOutput.xAxis[0].data = incMonthDep.thisMonth.outlayTrend.xData
	              		self.optionsHosOutput.series[0].data = incMonthDep.thisMonth.outlayTrend.yData
	              		self.optionsHosOutput.series[1].data = incMonthDep.samePeriod.outlayTrend.yData
	              		self.myChart4 = echarts.init(self.$refs.hosoutput)
						self.myChart4.setOption(self.optionsHosOutput)
						self.optionsHosOut.series[0].data[0].value = incMonthDep.thisMonth.treaOut
						self.optionsHosOut.series[0].data[1].value =incMonthDep.samePeriod.treaOut
						self.myChart14 = echarts.init(self.$refs.hosOut)
						self.myChart14.setOption(self.optionsHosOut)
	              		// console.log(self.optionsHosIncome)
	              		//医疗结余
	              		self.thisMonth_emeLeft = self.number((Number(incMonthDep.thisMonth.emeLeft)/10000).toFixed(2))
	              		// self.samePeriod_emeLeft = incMonthDep.samePeriod.info.emeLeft
	              		// self.samePeriod_emeLeft.numerical = self.number((Number(self.samePeriod_emeLeft.numerical)/10000).toFixed(2))
	              		self.optionsEmeLeft.series[0].data[0].value = incMonthDep.thisMonth.emeLeft
						self.optionsEmeLeft.series[0].data[1].value = incMonthDep.samePeriod.emeLeft
						self.myChart20 = echarts.init(self.$refs.emeLeft)
						self.myChart20.clear()
						self.myChart20.setOption(self.optionsEmeLeft)
	              		//经治组收入
	              		self.departmentCode = incMonthDep.thisMonth.groupTrend.codes
	              		self.options.yAxis[0].data = incMonthDep.thisMonth.groupTrend.xData
	              		if (incMonthDep.thisMonth.groupTrend.xData.length == 0 ) {
	              			self.imgShow = true
	              		} else {
	              			self.imgShow = false
		              		self.options.series[0].data = incMonthDep.thisMonth.groupTrend.yData
		              		self.options.series[1].data = []
		              		self.options.yAxis[0].data.forEach(() => {
		              			self.options.series[1].data.push(100)
		              		})
		              		self.listHeight = (parseInt(self.options.yAxis[0].data.length)*45 + 60) + 'px'
		              		self.myChart5 = echarts.init(self.$refs.incomeTrends)
		              		setTimeout(() => self.myChart5.resize(), 0)
							self.myChart5.setOption(self.options)	
	              		}
						//收支走势图
						self.optionsIncomeTrend.xAxis.data = incMonthDep.thisMonth.monthTrend.xData
						self.optionsIncomeTrend.series[0].data = incMonthDep.thisMonth.monthTrend.yTreaInc
						self.optionsIncomeTrend.series[1].data = incMonthDep.thisMonth.monthTrend.yTreaOut
						self.optionsIncomeTrend.series[2].data = incMonthDep.thisMonth.monthTrend.yEmeLeft
						self.myChart = echarts.init(self.$refs.incomeTrend)
						self.myChart.clear()
						self.myChart.setOption(self.optionsIncomeTrend)
	           		// self.departmentArr = rep.data.data.department
	          		} else if (rep.data.statusCode === '10003'){
              	 		self.$router.push('/login')
              		}  else if(rep.data.statusCode === '00002') {
		             	
		             	var type = ''
						var name = sessionStorage.getItem('depName')
						var id = ''
						self.departmentArr.forEach((item) => {
							if (item.name === name) {
								type = item.type
								id = item.id
							}
						})
						self.depId = id
						type === '临床服务' ? self.type = '临床服务类' : type === '后勤保障' ? self.type = '后勤保障类' : self.type = '医技医辅类'
						// alert(self.type)
						if (type === '临床服务') {
								self.type = '临床服务类'
								self.serviceDepAnalyse()
								self.$router.push('/section-service/' + self.depId)

						} else if (type === '医技医辅') {
							self.type = '医技医辅类'
							self.$router.push('/section-hospital/' + self.depId)
							// self.$nextTick(() => {
							// }) 
						}else {
							self.$router.push('/section-analysis/' + self.depId)
						}
		             }
	         	}).catch(function (error) {
	          		// console.log(error);
	         	});
			},
			//申请口径
			getIncDepApplyAnalyse () {
				var qs = require('qs');
	          	var self = this
	          	axios.post('/service', 
	          		qs.stringify({"data": JSON.stringify({
	              		command: 'incDepApplyAnalyse',
	              		platform: 'web',
	              		monthTime: self.month,
	              		depId: self.depId
	             		})
	          		}), {
	              		headers: {
	               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
	              		}
	            }).then(function (rep) {
	              	if (rep.data.statusCode === '10001') {
	              		let incMonthDep = rep.data.data.incMonthDep
	              		//医疗收入
	              		self.thisMonth_treaInc = self.number((Number(incMonthDep.thisMonth.treaInc)/10000).toFixed(2))
	              		self.samePeriod_treaInc = incMonthDep.samePeriod.info.treaInc
	              		self.samePeriod_treaInc.numerical = self.number((Number(self.samePeriod_treaInc.numerical)/10000).toFixed(2))
	              		self.optionsHosInc.series[0].data[0].value = incMonthDep.thisMonth.treaInc
						self.optionsHosInc.series[0].data[1].value = incMonthDep.samePeriod.treaInc
						self.myChart13 = echarts.init(self.$refs.applyHosInc)
						self.myChart13.setOption(self.optionsHosInc)
	              		//经治组收入
	              		self.options.yAxis[0].data = incMonthDep.thisMonth.groupTrend.xData
	              		self.departmentCode = incMonthDep.thisMonth.groupTrend.codes
	              		if (incMonthDep.thisMonth.groupTrend.xData.length == 0 ) {
	              			self.imgShow = true
	              		} else {
	              			self.imgShow = false
		              		self.options.series[0].data = incMonthDep.thisMonth.groupTrend.yData
		              		self.options.series[1].data = []
		              		self.options.yAxis[0].data.forEach(() => {
		              			self.options.series[1].data.push(100)
		              		})
		              		self.listHeight = (parseInt(self.options.yAxis[0].data.length)*45 + 60) + 'px'
		              		self.myChart5 = echarts.init(self.$refs.incomeTrends)
		              		setTimeout(() => self.myChart5.resize(), 0)
							self.myChart5.setOption(self.options)	
	              		}
	     //          		self.options.series[0].data = incMonthDep.thisMonth.groupTrend.yData
	     //          		self.listHeight = (parseInt(self.options.yAxis[0].data.length)*45 + 60) + 'px'
	     //          		self.myChart5 = echarts.init(self.$refs.incomeTrends)
	     //          		setTimeout(() => self.myChart5.resize(), 0)
						// self.myChart5.setOption(self.options)
						//收支走势图
						self.shenqingIncomeTrend.xAxis.data = incMonthDep.thisMonth.monthTrend.xData
						self.shenqingIncomeTrend.series[0].data = incMonthDep.thisMonth.monthTrend.yTreaInc
						self.shenqingIncomeTrend.series[1].data = incMonthDep.thisMonth.monthTrend.yTreaOut
						self.shenqingIncomeTrend.series[2].data = incMonthDep.thisMonth.monthTrend.yEmeLeft
						self.myChart = echarts.init(self.$refs.incomeTrend)
						self.myChart.clear()
						self.myChart.setOption(self.shenqingIncomeTrend)
						// 住院收入构成
						self.optionsAllincome.xAxis[0].data = incMonthDep.thisMonth.hosIncSub.xData
						self.optionsAllincome.series[0].data = incMonthDep.thisMonth.hosIncSub.yData
						self.optionsAllincome.series[1].data = incMonthDep.samePeriod.hosIncSub.yData
						if (incMonthDep.thisMonth.hosIncSub.yData.length == 0) {
							self.zhuyuanImg = true
						} else {
							self.zhuyuanImg = false
							self.myChart1 = echarts.init(self.$refs.allincome)
							self.myChart1.setOption(self.optionsAllincome)
						}
						
						//门诊收入构成
						self.optionsAlloutput.xAxis[0].data = incMonthDep.thisMonth.emeIncSub.xData
						self.optionsAlloutput.series[0].data = incMonthDep.thisMonth.emeIncSub.yData
						self.optionsAlloutput.series[1].data = incMonthDep.samePeriod.emeIncSub.yData
						if (incMonthDep.thisMonth.hosIncSub.yData.length == 0) {
							self.menzhenImg = true
						} else {
							self.menzhenImg = false
							self.myChart2 = echarts.init(self.$refs.alloutput)
							self.myChart2.setOption(self.optionsAlloutput)
						}
						
						// this.myChart2 = echarts.init(this.$refs.alloutput)
						// this.myChart2.setOption(this.optionsAlloutput)
	           		// self.departmentArr = rep.data.data.department
	          		}
	         	}).catch(function (error) {
	          		// console.log(error);
	         	});
			},
			getDepartment () {
	          	var qs = require('qs');
	          	var self = this
	          	axios.post('/service', 
	          		qs.stringify({"data": JSON.stringify({
	              		command: 'getDepartment',
	              		platform: 'web',
	              		monthTime: self.month
	             		})
	          		}), {
	              		headers: {
	               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
	              		}
	            }).then(function (rep) {
	              	if (rep.data.statusCode === '10001') {
	              	// console.log(rep.data.data.department)
	           		self.departmentArr = rep.data.data.department
	           		if(!sessionStorage.getItem('depName')) {
	               		sessionStorage.setItem('depName',rep.data.data.department[0].name)
	               		self.value = rep.data.data.department[0].name
	                } else {
	               		self.value = sessionStorage.getItem('depName')
	                }
	                self.departmentArr.forEach((item) => {
						if (item.name === self.value) {
							self.depId = item.id
						}
					})
					if( self.tabShow == true) {
						self.getincDepAnalyse()
					} else {
						self.getIncDepApplyAnalyse()
					}
	           		
	           		self.departmentArr.forEach((item) => {
	           			if(item.type === '后勤保障') {
	           				item.dtDisabled = true
	           			} else {
	           				item.dtDisabled = false
	           			}
	           		})
	          		}
	         	}).catch(function (error) {
	          		// console.log(error);
	         	});
	 		},

			nav_click (type) {
				type === 'money' ? this.$router.push('/income') : type === 'business' ? this.$router.push('/all') : this.$router.push('/jixiaoall')
			},
			tab (type) {
				// this.$nextTick(() => {
					// type === 'all' ? this.tabShow = true : this.tabShow = false

					if (type === 'all') {
						// alert(1)
						this.tabShow = true
						this.getincDepAnalyse()
					} else {
						this.tabShow = false
						this.$nextTick(() => {
							// this.myChart1 = echarts.init(this.$refs.allincome)
							// this.myChart1.setOption(this.optionsAllincome)
							this.getIncDepApplyAnalyse()
							// this.myChart2 = echarts.init(this.$refs.alloutput)
							// this.myChart2.setOption(this.optionsAlloutput)


						})
					}
				// })
			},
			backClick () {
				let depName = sessionStorage.getItem('depName')
				var type = ''
				let depId = ''
				this.departmentArr.forEach((item) => {
					if (item.name === depName) {
						type = item.type
						depId = item.id
					}
				})
				// alert(type)
				// type === '临床服务' ? this.type = '临床服务类' : type === '后勤保障' ? this.type = '后勤保障类' : this.type = '医技医辅类'
				// alert(this.type)
				if (type === '临床服务') {
						this.$router.push('/section-service/' + depId)

				} else if (type === '医技医辅') {
					this.$router.push('/section-hospital/' + depId)
					 
				}else {
					this.$router.push('/section-analysis/' + depId)
				}
				// this.$router.push('/section-analysis/' + depId)
			},
			change (name) {
				var type = ''
				var id = ''
				this.departmentArr.forEach((item) => {
					if (item.name === name) {
						type = item.type
						id = item.id
					}
				})
				this.depId = id
				this.value = name
				if( this.tabShow == true) {
					this.getincDepAnalyse()
				} else {
					this.getIncDepApplyAnalyse()
				}
				sessionStorage.setItem('depName',name)
			},
		}
	}
</script>
<style lang="scss" scoped>
	header{
		height: 63px;
		background: #fff;
		line-height: 63px;
		padding-left: 130px;
		font-size: 16px;
		.div{
			margin: 0 auto;
			float: right;
			margin-right: 45%;
		}
		span:nth-child(1){
			color: #989898;
			margin-right: 40px;
			cursor: pointer;
		}
		span:nth-child(1):hover{
			color: #85C8FD;
		}
		span:nth-child(2){
			color: #686868;
		}
	}
	.container{
		background: #f8f8f8;
		padding: 1.4%;
		height: 100%;
		.container_top{
			ul{
				display: flex;
				justify-content: flex-end;
				li{
					// height: 13px;
					font-size: 14px;
					margin-right: 20px;
					cursor: pointer;
					span:first-child{
						display: inline-block;
						width: 13px;
						height: 13px;
						border-radius: 2px;
						border: 1px solid #CBCBCB;
						vertical-align: top;
						&:hover {
							background: #85C8FD;
						}
					}
				}
			}
		}
		.container_first, .container_second{
			margin-top: 20px;
			width: 100%;
			// background: #fff;
			// display: flex;
			.come_title {
				width: 185px;
				height:	70px;
				color: #4D4D4D;
				margin-left: 20px;
				// border-bottom: 1px solid #E5E5E5;
				font-size: 25px;
				span {
					display: inline-block;
					font-family: "微软雅黑,PingFangSC";
					height: 30px;
					line-height: 30px;
				}
				span:nth-child(1){
					font-size: 17px;
				}
				span:nth-child(3){
					font-size: 16px;
					color: #9B9B9B;
				}
				span:nth-child(4){
					font-size: 24px;
					color: #4D4D4D;
				}
				
				.unit {
					font-family: "微软雅黑,PingFangSC";
					font-size: 16px;
					color: #9B9B9B;
				}
			}
			.come_t{
				width: 165px;
				height:	60%;
				color: #4D4D4D;
				margin-left: 20px;
				// padding-bottom: 20px;
				border-bottom: 1px solid #E5E5E5;
				font-size: 25px;
				span {
					display: inline-block;
					height: 30px;
					line-height: 30px;
				}
				span:nth-child(1){
					font-size: 17px;
				}
				span:nth-child(3){
					font-size: 16px;
					color: #9B9B9B;
				}
				span:nth-child(5){
					font-size: 25px;
				}
				span:nth-child(7) {
					font-size: 14px;
					color: #EC7676;
				}
				.unit {
					font-size: 16px;
					color: #9B9B9B;
				}
			}
			.come_c, .come_r{
				line-height: 60px;
				color: #EC7676;
				padding-left: 20px;
				span{
					display: inline-block;
					margin-right: 8px;
					// padding-right: 30px;
				}
				span:first-child{
					color: #9B9B9B;
				}
				span:nth-child(2){
					color: #4D4D4D;
					font-size: 16px;
				}
			}
			.come_r{
				line-height: 20px;
				span{
					margin-right: 0;
				}
			}
		}
		.container_first{
			height: 40%;
			width: 100%;
			display: flex;
			.hos_output{
				width: 51%;
				margin-right: 1%;
				display: flex;
				.come {
					width: 205px;
					height: 100%;
					padding: 10px;
				}
			}
			.hos_income{
				width: 31%;
				margin-right: 1%;
				display: flex;
				.come {
					width: 205px;
					height: 100%;
					padding: 10px;
				}
			}
			.all_income, .all_rest, .all_output, .hos_output, .hos_income{
				background: #fff;
				height: 100%;
				box-shadow: 1px 1px 1px 1px #ccc;
			}
			.all_rest{
				width: 16%;
				.come {
					width: 205px;
					height: 100%;
					padding: 10px;
				}
			}
			// .all_output{	
			// 	width: 42%;
			// 	display: flex;
			// 	box-shadow: 1px 0px 1px 1px #ccc;
			// 	// margin-right: 1%;
			// }
			.all_income{
				width: calc(100% - 205px);
				display: flex;
				box-shadow: 1px 1px 1px 1px #ccc;
				// margin-right: 1%;
				// .come {
				// 	width: 205px;
				// 	height: 100%;
				// 	padding: 10px;
				// }
				.data-lack {
					width: calc(50% - 10px);
					height: calc(100% - 10px);
					padding:5px; 
					span {
						display: block;
						float: right;
						position: relative;
						right: 30px;
						top: 20px;
					}
					img {
						margin-top: 10%;
						margin-left: 10%;
					}
				}
			}
			// .all_output, .all_income{
			// 	box-shadow: none;
			// }
		}
		.container_second{
			width: 100%;
			height: 50%;
			display: flex;
			.second_left{
				width: 39%;
				margin-right: 1%;
				background: #fff;
			box-shadow: 1px 1px 1px 1px #ccc;
			}
			.second_right{
				width: 60%;
				background: #fff;
			box-shadow: 1px 1px 1px 1px #ccc;
			}
			.second_title{
				height: 50px;
				width: 100%;
				line-height: 50px;
				font-size: 17px;
				color: #4D4D4D;
				text-indent: 30px;
				border-bottom: 1px solid #eee;
			}
		}
		.topActive{
				span:first-child{
					background: #72B8EF !important;
					border-color: #72B8EF !important;
				}
		}
	}
</style>